<%--
  Created by IntelliJ IDEA.
  User: 左
  Date: 2024/12/30
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    Integer stuID= Integer.valueOf(String.valueOf(request.getAttribute("stuID")));
    String name= (String) request.getAttribute("name");
    String gender= (String) request.getAttribute("gender");
    String password= (String) request.getAttribute("password");
    String phone= (String) request.getAttribute("phone");
    String buildings_card= (String) request.getAttribute("buildings_card");
    String rooms_card= (String) request.getAttribute("rooms_card");
    Integer stucode= Integer.valueOf(String.valueOf(request.getAttribute("stucode")));
%>
<html>
<head>
    <title>Title</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header1 {
            background-color: #007BFF;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .sidebar {
            width: 200px;
            background-color: #f8f9fa;
            float: left;
            height: 100vh;
            padding-top: 20px;
        }
        .sidebar a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: black;
        }
        .sidebar a:hover {
            background-color: #ddd;
        }
        .content {
            margin-left: 210px;
            padding: 20px;
        }
        table {
            width: 65%;
            border-collapse: collapse;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        td {
            padding: 8px;
            text-align: left;
        }

        .right-align {
            width: 100px;
            text-align: right;
        }
        input[type="text"],
        input[type="password"] {
            padding: 5px;
            margin: 5px 0;
            box-sizing: border-box;
        }

        select{
            width:50%;
        }
        .submit-btn,
        .exit-btn{
            display: inline-block;
            padding:8px 15px;
            margin:10px;
            font-size:16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            color:white;
            background-color: darkseagreen;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .header {
            background: #fff;
            border-bottom: 1px solid #cccccc;
            border-bottom: 1px solid #eee;
            border-left: 1px solid #ffffff;
            padding: .5em 0em 1em 0em;
            margin: 0px 0em 2em 0em;
        }
        .header h1 {
            margin: 0em 0em .5em 0em;
            padding: 0em;
            line-height: 1em;
            font-size: 1.5em;
            font-weight: normal;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //封装
            function $(id) {
                return document.getElementById(id);
            }
            let telFlag, nicknameFlag, pwdFlag, repwdFlag,roomFlag,stuIDFlag;
            //给电话号码输入框绑定blur事件处理函数
            let stuID=$("id");
            stuID.onblur=function()
            {
                if(stuID.value.trim()==="")
                {
                    $("stuids").innerHTML="<font color='red'>请输入您的学号</font><br>请输入您的学号";
                }else
                {
                    $("stuids").innerHTML="<font color='green'>通过</font><br>请输入您的学号";
                }
            }
            let tel = $("tel");
            tel.onblur = function () {
                let telReg = /^1[3-9][0-9]{9}$/;//reg=/^1[3-9]\d{9}$/
                if (telReg.test(tel.value)) {
                    $("tels").innerHTML = "<font color='green'>通过</font><br>请输入你的手机号";
                    telFlag = true;
                } else {
                    $("tels").innerHTML = "<font color='red'>请输入正确的手机号</font><br>请输入你的手机号";
                    telFlag = false;
                }
            }
            let roomCards=$("sturooms_card");
            roomCards.onblur=function()
            {
                if(roomCards.value.trim()==="")
                {
                    $("roomCard").innerHTML="<font color='red'>请输入正确的寝室编号</font><br>请输入寝室编号";
                }else
                {
                    $("roomCard").innerHTML="<font color='green'>通过</font><br>请输入寝室编号";
                }
            }
            let nickname = $("name");
            nickname.onblur = function () {
                let nicknameReg = /^[a-zA-Z0-9\u4E00-\u9fa5]{2,12}$/;
                if (nicknameReg.test(nickname.value)) {
                    $("names").innerHTML = "<font color='green'>通过</font><br>2-12个中英文或数字,将公开显示";
                    nicknameFlag = true;
                } else {
                    $("names").innerHTML = "<font color='red'>请输入合适的昵称</font><br>2-12个中英文或数字,将公开显示";
                    nicknameFlag = false;
                }
            }
            let pwd = $("pwd");
            pwd.onblur = function () {
                var pwdReg = /^[a-zA-Z0-9]{5,15}$/;
                if (pwdReg.test(pwd.value)) {
                    $("pwds").innerHTML = "<font color='green'>通过</font><br>5-15个字符,建议使用大小写字母及数字";
                    pwdFlag = true;
                } else {
                    $("pwds").innerHTML = "<font color='red'>请输入正确的密码</font><br>5-15个字符,建议使用大小写字母及数字";
                    pwdFlag = false;
                }
            }
            let repwd = $("repwd");
            repwd.onblur = function () {
                var pwd = $("pwd");
                if (repwd.value != "") {
                    if (repwd.value == pwd.value) {
                        $("repwds").innerHTML = "<font color='green'>通过</font><br>请再次输入密码";
                        repwdFlag = true;
                    } else {
                        $("repwds").innerHTML = "<font color='red'>密码输入错误，两次密码不相同</font><br>请再次输入密码";
                        repwdFlag = false;
                    }
                } else {
                    $("repwds").innerHTML = "<font color='red'>请再次输入密码</font><br>请再次输入密码";
                    repwdFlag = false;
                }
            }
            // 检查表单是否可以提交
            let form = document.querySelector("form");
            form.onsubmit = function (event) {
                    alert("修改成功");
            }
        };
    </script>
</head>
<body>
<jsp:include page="/nav.jsp"/>
<div class="content">
    <div class="header">

        <h1 class="page-title">修改学生信息</h1>

    </div>
    <div>
        <form  action="studentupdate" method="post">
            <table align="center">
                <tr>
                    <td class="right-align" >ID</td>
                    <td><input type="text" name="stuID" id="id" value="<%=stuID%>"></td>
                    <td style="color:#ccc;" id="stuids"></td>
                </tr>
                <tr>
                    <td class="right-align" >学号</td>
                    <td><input type="text" name="stucode" id="stu_code" value="<%=stucode%>"></td>
                    <td style="color:#ccc;" id="stucodes"></td>
                </tr>
                <tr>
                    <td class="right-align" >姓名</td>
                    <td><input type="text" name="stuname" id="name" value="<%=name%>"></td>
                    <td style="color:#ccc;" id="names"></td>
                </tr>
                <tr>
                    <td class="right-align" >性别</td>
                    <td><select id="sex" name="stusex" value="<%=gender%>">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select></td>
                    <td style="color:#ccc;" id="gender"></td>
                </tr>
                <tr>
                    <td class="right-align" >密码</td>
                    <td><input type="password" name="stupwd" id="pwd" value="<%=password%>"></td>
                    <td style="color:#ccc;" id="pwds"></td>
                </tr>
                <tr>
                    <td class="right-align" >重复密码</td>
                    <td><input type="password" name="sturepwd" id="repwd"></td>
                    <td style="color:#ccc;" id="repwds"></td>
                </tr>
                <tr>
                    <td class="right-align" >联系方式</td>
                    <td><input type="text" name="stutel" id="tel" value="<%=phone%>"></td>
                    <td style="color:#ccc;" id="tels"></td>
                </tr>
                <tr>
                <td class="right-align">寝室编号</td>
                <td><input type="text" name="rooms_card" id="sturooms_card" value="<%=rooms_card%>"></td>
                <td style="color:#ccc;" id="roomCard"></td>
                </tr>
                <tr>
                    <td class="right-align">宿舍楼号</td>
                    <td><select name="Building_card" id="stuBuilding_card" value="<%=buildings_card%>">
                        <c:forEach items="${builds}" var="b">
                            <option value="${b.buildingID}">${b.buildingCard}</option>
                        </c:forEach>
                    </select></td>
                </tr>

                <tr>
                    <td colspan="4">
                        <input type="submit" class="submit-btn" value="保存">
                        <a href="list" class="exit-btn" value="返回">返回</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>
